<template>
	<view class="background">
		<view class="img">
			<image src="../../../static/images2/login/logo.png" mode=""></image>
		</view>
		<view class="formData">
			<formData :values="values" :fields="fields" :rules="rules" ref="FormData" labelAlign="left"
				:actionSheetList="actionSheetList">
			</formData>
		</view>
		<view class="button_error d-f-j-c-a-i " @click="submit">
			提交认证
		</view>
	</view>
</template>

<script>
	import FormData from '@/components/form/index'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		components: {
			FormData
		},
		methods: {
			...mapActions({
             authentication:'LOGIN/AUTHENTICATION',//提交认证
			 getBankData:'LOGIN/GET_BANK_DATA',//获取银行列表
			}),
			submit() {
				let flag = this.$refs.FormData.submit()
				if (flag) {
					this.authentication()
				}
			}
		},
		mounted() {
         this.getBankData()
		},
		watch: {

		},
		computed: {
			...mapState({
				fields: (state) => state.LOGIN.authenFields,
				values: (state) => state.LOGIN.authenValues,
				rules: (state) => state.LOGIN.authenRules,
				actionSheetList: (state) => state.LOGIN.actionSheetList,
			})
		}
	}
</script>

<style scoped lang='scss'>
	.background {
		background: linear-gradient(180deg, #E0EDFF 0%, #FFFFFF 40%, #FFFFFF 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.img {
		width: 100%;
		height: 352rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		uni-image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.formData {
		width: 100%;
		height: 606rpx;
		padding: 0rpx 32rpx;
	}

	.button_error {
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #4A8FF9 0%, #409AFF 100%);
		border-radius: 100rpx;
		font-size: 32rpx;
		color: #FFF;
		margin-top: 94rpx;
	}
</style>
